import { PostTree } from './post-tree';
import { Post } from '../../types';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';

import Apis from '../../api';

import styles from './left.module.scss';

function Left({ onPostClick }: { onPostClick: (post: Post) => void }) {
  const history = useHistory();

  return (
    <div>
      <div className={styles['cmd-bar']}>
        <div className={styles['cmd-bar-item']} onClick={() => history.goBack()}>
          <ArrowLeftOutlined />
        </div>
      </div>
      <div className={styles['post-tree']}>
        <PostTree
          rootId={-1}
          onSummaryClick={(s) => {
            Apis.Post.getPost(s.id)
              .then((post) => onPostClick(post))
              .catch((err) => console.error('TODO:', err));
          }}
        />
      </div>
    </div>
  );
}

export default Left;
